<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>登录＆注册</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
    <link rel="stylesheet" href="css/dmaku.css">
    <link rel="stylesheet" href="./css/verify.css">
    <script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
    <script type="text/javascript" src="js/verify.js" ></script>
</head>

<body>


<div class="dowebok" id="dowebok">
    <div class="form-container sign-up-container">
        <form action="../phz612_Web_exploded/UsersServlet">
            <h1>注册</h1>
            <input type="hidden" name="method" value="add">
            <input type="username" name="user_name" placeholder="用户名">
            <input type="email" name="email" placeholder="电子邮箱">
            <input type="password" name="password" placeholder="密码">
            <input type="password" placeholder="确认密码">
            <button type="submit" href="index.jsp" >注册</button>
        </form>
    </div>
    <div class="form-container sign-in-container">
        <form action="../phz612_Web_exploded/UsersServlet" method="post">
            <h1>登录</h1>
            <div class="social-container">
                <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
            </div>
            <font color="rgba(200,200,200,0.6)" size="3">${requestScope.err}</font>
            <span>或使用您的帐号</span>
            <input type="username" name="user_name" placeholder="用户名/电子邮箱">
            <input type="password" name="password" placeholder="密码">

            <div id="mpanel1" style="margin-bottom:10px "></div>
            <div class="checkbox" style="width: 100%">
                <label class="pull-right" style="">
                    <input type="checkbox" name="cb" value="cb" style="">记住密码
                </label>
            </div>
            <a href="#">忘记密码？</a>
            <button type="submit" href="index.jsp">登录</button>
        </form>
    </div>
    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>已有帐号？</h1>
                <p>请使用您的帐号进行登录</p>
                <button class="ghost" id="signIn">去登录</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>没有帐号？</h1>
                <p>立即注册加入我们，和我们一起开始旅程吧</p>
                <button class="ghost" id="signUp">去注册</button>
            </div>
        </div>
    </div>
</div>
<script src="js/dmaku.js"></script>
<script type="text/javascript">
    $('#mpanel1').slideVerify({
        type : 1,		//类型
        vOffset : 0,	//误差量，根据需求自行调整
        barSize : {
            width : '100%',
            height : '40px',
    },
        ready : function() {
        },
        success : function() {
            alert('验证成功，添加你自己的代码！');
            //......后续操作
        },
        error : function() {
            //		        	alert('验证失败！');
        }

    });
</script>
</body>
</html>
